/*
 * @Author: Zhang Kai
 * @Date: 2021-10-20 10:39:44
 * @LastEditors: mayijun
 * @LastEditTime: 2022-05-09 15:43:48
 * @FilePath: /metricsx-standard-ui/src/views/indexlib/atom.tsx
 */
// 指标库
import { defineComponent, onMounted, reactive, watch, ref } from 'vue';
import classnames from 'classnames';
import './index.scss';
import LibTable from './indexlibTable';
import API from '@/services';

const IndexLibrary = defineComponent({
  name: 'SystemSetting',
  components: { LibTable },
  props: {},
  setup: (props, { slots, attrs, emit }) => {
    const formInline = reactive({
      content: '',
      level1: '-1',
      level2: '-1',
      level3: '-1',
      subType: '-1'
    });
    // 分页信息
    // const currentPageSize = ref(20);
    // enable l2 l3
    const enableL2 = ref(false);
    const enableL3 = ref(false);
    const tagId = ref('-1');
    const searchKey = ref(1);

    watch(
      [
        () => formInline.level1,
        () => formInline.level2,
        () => formInline.level3
      ],
      ([l1, l2, l3], [preL1, preL2, preL3]) => {
        if (l3 !== '-1') {
          tagId.value = l3;
        } else if (l2 !== '-1') {
          tagId.value = l2;
        } else if (l1 !== '-1') {
          tagId.value = l1;
        } else {
          tagId.value = '-1';
        }
      }
    );
    // 热门搜索top 5
    const top5Items = reactive({
      data: []
    });
    const currentHotSearch = ref(-1);
    const onHotSearchClick = (item: any, index: number) => {
      if (currentHotSearch.value === index) {
        currentHotSearch.value = -1;
        formInline.content = '';
      } else {
        currentHotSearch.value = index;
        formInline.content = item.keywordName;
        searchKey.value = searchKey.value + 1;
      }
    };
    //
    watch(
      () => formInline.content,
      (v) => {
        if (v === '') {
          currentHotSearch.value = -1;
        }
      }
    );
    // 级联下拉选择筛选标签
    const filterTags = reactive({
      data: [{ id: '-1', subjectName: '全部' }]
    });
    const filterL2Tags = reactive({
      data: [{ id: '-1', subjectName: '全部' }]
    });
    const filterL3Tags = reactive({
      data: [{ id: '-1', subjectName: '全部' }]
    });
    // 指标分类
    const metricsSubTypes = reactive({
      data: [{ id: '-1', label: '全部', value: '-1' }]
    });

    const onSubmit = () => {
      searchKey.value = searchKey.value + 1;
    };
    const onSearchKeyup = (e: any) => {
      // console.log('🚀 ~ file: index.tsx ~ line 92 ~ onSearchKeyup ~ e', e);
      const { keyCode } = e;
      if (keyCode === 13) {
        onSubmit();
      }
    };

    onMounted(async () => {
      const { code, data } = await API.topSearchMetrics.getBySize({
        size: 5
      }); //getTopSearchKeyWords({ topNum: 5 });
      if (code === 200) {
        top5Items.data = data as any;
      }
      // 获取筛选级联标签
      const { code: code1, data: data1 = [] as any } =
        await API.subject.getSubjectsList({});
      if (code1 === 200) {
        data1.unshift({ id: '-1', subjectName: '全部' });
        filterTags.data = data1.map((d: any) => {
          d.id = d.id + '';
          return d;
        });
        formInline.level1 = filterTags.data[0].id;
      }
      // 原子指标 - atomic; 派生指标 - derived
      const { code: code2, data: data2 = [] as any } =
        await API.enumBao.getMetricsByType({ type: 'atomic' });
      data2.unshift({ id: '-1', label: '全部', value: '-1' });
      metricsSubTypes.data = data2.map((d: any) => {
        d.id = d.value;
        return d;
      });
      console.log('🚀 ~ file: index.tsx ~ line 121 ~ onMounted ~ data2', data2);
    });
    // level1 changed
    watch(
      () => formInline.level1,
      (level1, prevLevel1) => {
        formInline.level2 = '-1';
        formInline.level3 = '-1';
        if (level1 == '-1') {
          enableL2.value = false;
          // formInline.level2 = '-1';
          // formInline.level3 = '-1';
          filterL2Tags.data = [{ id: '-1', subjectName: '全部' }];
        } else {
          const findItem: any = filterTags.data
            .filter((item) => item.id + '' === level1)
            .map((it) => {
              it.id = String(it.id);
              return it;
            });
          if (findItem && findItem.length) {
            filterL2Tags.data = [
              { id: '-1', subjectName: '全部' },
              ...findItem[0].children.map((c: any) => {
                c.id = String(c.id);
                return c;
              })
            ];
          } else {
            filterL2Tags.data = [{ id: '-1', subjectName: '全部' }];
          }
          enableL2.value = true;
        }
      }
    );
    // level2 changed
    watch(
      () => formInline.level2,
      (level2, prevLevel2) => {
        formInline.level3 = '-1';
        if (level2 == '-1') {
          enableL3.value = false;
          filterL3Tags.data = [{ id: '-1', subjectName: '全部' }];
        } else {
          const findItem: any = filterL2Tags.data
            .filter((item) => item.id === level2)
            .map((it) => {
              it.id = it.id + '';
              return it;
            });

          if (findItem && findItem.length) {
            filterL3Tags.data = [
              { id: '-1', subjectName: '全部' },
              ...findItem[0].children.map((c: any) => {
                c.id = String(c.id);
                return c;
              })
            ];
          } else {
            filterL3Tags.data = [{ id: '-1', subjectName: '全部' }];
          }
          enableL3.value = true;
        }
      }
    );

    return () => {
      const enableL2Value = enableL2.value;
      const enableL3Value = enableL3.value;
      return (
        <div class="indexlib-wrap">
          <div class="indexlib-search-wrap">
            <el-form
              inline={true}
              v-model={formInline}
              class="form-inline"
              label-position={'right'}
            >
              {/* style={{ paddingLeft: '30px' }} */}
              <div>
                <el-form-item label="指标名称:" class="indexname-label-wrap">
                  <el-input
                    clearable
                    size="large"
                    class="search-input"
                    v-model={formInline.content}
                    placeholder="请输入指标名称"
                    onKeyup={onSearchKeyup}
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" onClick={onSubmit}>
                    搜索
                  </el-button>
                </el-form-item>
                <el-form-item
                  label="主题筛选"
                  class="filter-level-wrap filter-level-1"
                >
                  <el-select
                    size="large"
                    class="filter-select-1"
                    v-model={formInline.level1}
                    placeholder="请选择一级主题"
                  >
                    {filterTags.data.map((tag: any) => (
                      <el-option
                        key={tag.id}
                        label={tag.subjectName}
                        value={tag.id}
                      ></el-option>
                    ))}
                  </el-select>
                </el-form-item>
                <el-form-item label="" class="filter-level-wrap filter-level-2">
                  <el-select
                    size="large"
                    disabled={!enableL2Value}
                    class="filter-select-2"
                    v-model={formInline.level2}
                    placeholder="请选择二级主题"
                  >
                    {filterL2Tags.data.map((tag: any) => (
                      <el-option
                        key={tag.id}
                        label={tag.subjectName}
                        value={tag.id}
                      ></el-option>
                    ))}
                  </el-select>
                </el-form-item>
                <el-form-item label="" class="filter-level-wrap filter-level-3">
                  <el-select
                    size="large"
                    disabled={!enableL3Value}
                    class="filter-select-3"
                    v-model={formInline.level3}
                    placeholder="请选择三级主题"
                  >
                    {filterL3Tags.data.map((tag: any) => (
                      <el-option
                        key={tag.id}
                        label={tag.subjectName}
                        value={tag.id}
                      ></el-option>
                    ))}
                  </el-select>
                </el-form-item>
                <el-form-item label="指标分类:" class="indextype-wrap">
                  <el-select
                    size="large"
                    class="filter-select-1"
                    v-model={formInline.subType}
                    placeholder="选择分类"
                  >
                    {metricsSubTypes.data.map((tag: any) => (
                      <el-option
                        key={tag.id}
                        label={tag.label}
                        value={tag.value}
                      ></el-option>
                    ))}
                  </el-select>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="热搜:" class="hot-key-workds-wrap">
                  <ul class="top-search-wrap">
                    {top5Items.data.map((item: any, index: number) => (
                      <li>
                        <a
                          class={classnames('search-keywrod', {
                            active: index === currentHotSearch.value
                          })}
                          onClick={() => onHotSearchClick(item, index)}
                        >
                          {item.keywordName}
                          {/* {item.searchNum ? ` (${item.searchNum})` : ''} */}
                        </a>
                      </li>
                    ))}
                  </ul>
                </el-form-item>
              </div>
            </el-form>
          </div>
          <div class="indexlib-table-wrap">
            <lib-table
              searchType="atom"
              key={searchKey.value}
              content={formInline.content}
              filterTagId={tagId.value}
              subType={formInline.subType}
            />
            {/* <IndexlibTable key={searchKey.value} content={''} /> */}
          </div>
        </div>
      );
    };
  }
});

export default IndexLibrary;
